import React,{ Component } from 'react'
import { Text,View,StyleSheet,WebView,TouchableOpacity,Image,TouchableNativeFeedback } from "react-native";
import Voic from "../../../../common/Voice";
import HorcTab from "../../../../common/horn";
export default class index extends Component{
    constructor(props){
        super(props);
        this.state = {
            data:{
                title:"关于九月份支部活动会后任务交流",
                content:"兹定于2018年11月22日上午9点30分，在鄂尔多斯市老干部局(党政大楼六楼601)，召开联络员工作会议，布置重要工作，敬请准时出席,特此通知！"
            },
            HorcStatus:true,
        }
    }
    static navigationOptions = {
        headerStyle:{
            backgroundColor:'#d04542',
            height:50,
        },
        headerTintColor:'white',
    };
    render(){
        const { navigation }  = this.props;
        return (
            <View style={ styles.container }>
                <Text style={ styles.title }>{ this.state.data.title ?(this.state.data.title).length>15?(this.state.data.title).substr(0,15)+"...":this.state.data.title:""}</Text>
                <Text style={ styles.dataTime }>2018-11-20</Text>
                <WebView
                    originWhitelist={ ['*'] }
                    source={ { html: this.state.data.content} }
                />
                <View style={ styles.BottomDobul }>
                    <TouchableOpacity onPress={()=>{
                        alert('参加')
                    }}>
                        <Text style={  styles.TopDobul}>报名参加</Text>
                    </TouchableOpacity>
                   <TouchableOpacity onPress={()=>{
                        alert('不参加')
                   }}>
                       <Text style={ styles.TwoDobul }>不参加</Text>
                   </TouchableOpacity>
                </View>
                <Voic ref="Voic" content={this.state.data.content} />
                <TouchableNativeFeedback onPress={()=>{
                    this.setState({
                        HorcStatus:true,
                    });
                    if(this.state.HorcStatus){
                        this.refs.Voic.onSyntheBtnPress();
                        this.setState({
                            HorcStatus:false,
                        })
                    }else {
                        this.refs.Voic.onPauseBtnPress();
                    }
                }}>
                <View style={ styles.positionV } >
                    <View style={ styles.ImageR }>
                        <HorcTab status={this.state.HorcStatus} />
                    </View>
                    <View style={ styles.ImageText}>
                        <Text style={{color:'red',fontSize: 15}}>语音播放</Text>
                    </View>
                </View>
                </TouchableNativeFeedback>
        </View>)
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        paddingLeft: 15,
        paddingTop: 25,
        paddingRight: 15,
        paddingBottom: 25,
        backgroundColor:'white',
    },
    title:{
        fontSize:20,
        fontWeight: '200',
        textAlign: 'center',
    },
    dataTime:{
        textAlign: 'right',
        marginTop: 10,
        color:'#999999',
    },
    BottomDobul:{
        marginTop: 10,
        marginBottom: 20,
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    TopDobul:{
        width:140,
        height:40,
        backgroundColor: '#d04542',
        textAlign:'center',
        lineHeight:40,
        borderRadius:4,
        color:'white',
    },
    TwoDobul:{
        width:140,
        height:40,
        textAlign:'center',
        lineHeight:40,
        borderRadius:4,
        borderColor:'#d04542',
        borderWidth:1,
        color:'#d04542',
    },
    positionV:{
        position: 'absolute',
        right:5,
        bottom: 130,
        flex: 1,
        flexDirection: 'row',
        alignItems:'center',
    },
    Image:{
        width:20,
        height:20,
        tintColor:'red',
    },
    ImageR:{
        padding:4,
        borderColor: '#ccc',
        borderWidth: 1,
        borderRadius:50,
        marginRight: -15,
        zIndex: 1,
        backgroundColor:'white',
    },
    ImageText:{
        color:'red',
        borderColor:'#ccc',
        borderWidth:1,
        padding:5,
        paddingLeft: 20,
        borderLeftWidth:0,
        zIndex: 0,
    }
});